<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/angular.js" charset="utf-8"></script>
    </head>
    <body ng-app="App">

        <div ng-controller="Ctrl">
            <h2>{{ msg }}</h2>
            <hr>
            <ul>
                <li ng-repeat="item in data.menu" ng-style="{borderBottom: '1px solid hotpink'}" ng-click="showInfo()">
                    <img ng-src="{{ item.activity.img }}" alt="">
                    <p>{{ item.activity.name }}</p>
                    <button ng-click="deleteGood()">删除</button>
                    <button ng-click="addText()">添加文字</button>
                </li>
            </ul>
        </div>

    </body>
    <script type="text/javascript">

        angular.module('App', [])
        .controller('Ctrl', ['$scope', '$timeout', '$interval', '$location', '$http', function ($scope, $timeout, $interval, $location, $http) {
            $scope.msg = '内置服务的使用';


            // setTimeout(function () {
            //     $scope.msg = '修改之后的文字';
            //     console.log($scope.msg);
            // }, 2000);

            var t = $timeout(function () {
                $scope.msg = '修改之后的文字';
                console.log($scope.msg);
            }, 2000);
            console.log(t);
            // 清除定时器的方法和原生JS的定时器不同
            $timeout.cancel(t);

            // 两点区别：1.返回值不同，清除方式不同 2.在原生定时器中修改数据，不会造成页面的更新，内置服务中的$timeout / $interval可以影响页面更新

            // $interval(function () {
            //     $scope.msg += '!';
            // }, 1000);

            console.log($location);

            // 使用$http发起网络请求
            $http({
                method: 'GET',
                url: 'http://h5.yztctech.net/api/axf/apihome.php'
            }).then(function (res) {
                $scope.data = res.data.data;
                console.log('请求成功');
            }, function () {
                console.log('失败了');
            });

            // 在网址中添加callback=JSON_CALLBACK参数即可
            $http.jsonp('https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=qwertyuiosdfghj').success(function (response) {
                console.log(response);
            });

            $scope.showInfo = function () {

                // alert(this.item.activity.name);
            };

            $scope.deleteGood = function () {
                console.log(this.$index);

                $scope.data.menu.splice(this.$index, 1);
            };

            $scope.addText = function () {
                this.item.activity.name += '1'
            };

        }]);


        // var t = setInterval(function () {
        //     console.log('interval');
        // }, 500);
        // var t2 = setTimeout(function () {
        //     console.log('timeout');
        // }, 1000);
        // console.log(t, t2);
        //
        // for (var i = 0 ;i < 100; i++) {
        //     clearInterval(i);
        //     clearTimeout(i);
        // }

        // setTimeout(function () {
        //     clearInterval(1);
        // }, 3000);



    </script>
</html>
